<template>
    <div class="modal-shade" v-show="isModal">
        <div class="modal-box">
            <div class="modal-top">
                <h3>{{ modal.title }}</h3>
            </div>
            <div class="modal-content">
                {{ modal.content }}
            </div>
            <div class="modal-bottom">
                <template v-if="modal.type === 'confirm'">
                    <input type="button" value="确认" @click="affirm" @mousedown="btnDown" @mouseup="btnUp" />
                    <input type="button" value="取消" @click="cancel" @mousedown="btnDown" @mouseup="btnUp" />
                </template>
                <template v-else>
                    <input type="button" value="确认" @click="affirm" @mousedown="btnDown" @mouseup="btnUp" />
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    isModal: {
        type: Boolean,
        default: false,
    },
    modal: {
        type: Object,
        default: () => ({
            title: '',
            content: '',
            type: 'info', // 'info' 或 'confirm'
        }),
    },
});

const emit = defineEmits(['close', 'affirm']);

function btnDown(event) {
    const btn = event.currentTarget;
    btn.style.boxShadow = `1px 1px 1px 1px black`;
}

function btnUp(event) {
    const btn = event.currentTarget;
    btn.style.boxShadow = `2px 2px 2px 2px black`;
}

function affirm() {
    emit('affirm');
    setTimeout(() => {
        emit('close');
    }, 300);
}

function cancel() {
    emit('close');
}
</script>

<style scoped>
.modal-shade {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(124, 124, 124, 0.473);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    border: 1px solid rgb(243, 238, 238);
}

.modal-shade .modal-box {
    width: 40%;
    height: 30%;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-shade .modal-box>div {
    width: 100%;
    flex: 1;
    display: flex;
}

.modal-shade .modal-box>div:nth-child(1) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
}

.modal-shade .modal-box>div:nth-child(2) {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-shade .modal-box>div:nth-child(3) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
}

.modal-shade .modal-box>div:nth-child(3) input {
    width: 30%;
    height: 50%;
    background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
    border-radius: 5px;
    border: 1px solid;
    color: white;
    cursor: pointer;
    box-shadow: 2px 2px 2px 2px black;
    margin-right: 5%;
}

.modal-shade .modal-box>div:nth-child(1),
.modal-shade .modal-box>div:nth-child(2) {
    border-bottom: 1px solid rgb(243, 238, 238);
}
</style>